<template>
	<div class="box">
		<div class="arrow">
			<div class="arr-left">&lt;</div>
			<div class="arr-right">&gt;</div>
		</div>
		<div class="container">
			<!-- 1.1 左右的按钮 -->
			<p class="zi">fsdfdsf</p>
			<!-- 1.2 图 -->
			<ul>
				<li><a href="javascript:;"><img src="./imgs/pic-01.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="./imgs/pic-02.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="./imgs/pic-03.jpg" alt=""></a></li>
				<li><a href="javascript:;"><img src="./imgs/pic-04.jpg" alt=""></a></li>
			</ul>
			<!-- 1.3 底部按钮 -->
			<ol>
				<li class="cur">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ol>
		</div>
		<div class="container1">
			<!-- 1.1 左右的按钮 -->
			<p class="zi1">fsdfdsf</p>
			<!-- 1.2 图 -->
			<div class="ul">
				<p><a href="javascript:;"><img src="./imgs/pic-01.jpg" alt=""></a></p>
				<p><a href="javascript:;"><img src="./imgs/pic-02.jpg" alt=""></a></p>
				<p><a href="javascript:;"><img src="./imgs/pic-03.jpg" alt=""></a></p>
				<p><a href="javascript:;"><img src="./imgs/pic-04.jpg" alt=""></a></p>
			</div>
			<!-- 1.3 底部按钮 -->
			<div class="ol">
				<p class=" cur1">1</p>
				<p>2</p>
				<p>3</p>
				<p>4</p>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: '',
	data() {
		return {

		};
	},
    mounted(){
      
        window.addEventListener('load', function () {
	// 1.0 获取元素
	var containerBox = document.querySelector('.container')
	var olLis = document.querySelectorAll('ol > li')
	var ulBox = document.querySelector('ul')
	var arrow = document.querySelector('.arrow')
	var leftBox = document.querySelector('.arr-left')
	var zi = document.querySelector('.zi')
	var rightBox = document.querySelector('.arr-right')

	var containerBox1 = document.querySelector('.container1')
	var olLis1 = document.querySelectorAll('.ol > p')
	var ulBox1 = document.querySelector('.ul')
	var arrow1 = document.querySelector('.arrow1')
	var leftBox1 = document.querySelector('.arr-left1')
	var zi1 = document.querySelector('.zi1')
	var rightBox1 = document.querySelector('.arr-right1')

	// 2.0 注册 ol 里面的 li  点击事件
	olLis.forEach(function (el, index) {
		el.addEventListener('click', function () {
			fn(index)
			// 统一索引
			count = index
		})
	})

	// 浅封装一下排他
	function fn(n) {
		// 排他
		olLis.forEach(function (item, i) {
			item.removeAttribute('class')
			// 以此次遍历同步操作ulBox
			ulBox.children[i].style.opacity = 0
		})

		olLis[n].className = 'cur'
		ulBox.children[n].style.opacity = 1
	}

	// 3.0 鼠标经过大盒子，显示左右按钮
	containerBox.addEventListener('mouseenter', function () {
		clearInterval(timer)
		timer = setInterval(function () {
			// rightBox.click()
			if (flag) {
				flag = false
				count++
				if (count > olLis.length - 1) count = 0
				fn(count)
			}
			zi.style.display = 'block'
		}, 2000)
		// arrow.style.display = 'none'
	})
	containerBox.addEventListener('mouseleave', function () {
		// arrow.style.display = 'block'
		zi.style.display = 'none'
		fn(0)
		// count = 0
		clearInterval(timer)
	})

	// 4.0 左右按钮点击事件
	var count = 0
	var flag = true
	var count1 = 0
	var flag1 = true
	rightBox.addEventListener('click', function () {
		if (flag1) {
			flag1 = false
			count1++
			if (count1 > olLis1.length - 1) count1 = 0
			fn1(count1)
		}
		if (flag) {
			flag = false
			count++
			if (count > olLis.length - 1) count = 0
			fn(count)
		}

		// if (flag1) {
		// 	flag1 = false
		// 	count1++
		// 	if (count1 > olLis1.length - 1) count1 = 0
		// 	fn1(count1)
		// }
	})

	leftBox.addEventListener('click', function () {
		if (flag) {
			flag = false
			count--
			if (count < 0) count = olLis.length - 1
			fn(count)
		}

		if (flag1) {
			flag1 = false
			count1--
			if (count1 < 0) count1 = olLis1.length - 1
			fn1(count1)
		}
		// if (flag1) {
		// 	flag1 = false
		// 	count1--
		// 	if (count1 < 0) count1 = olLis1.length - 1
		// 	fn1(count1)
		// }
	})

	// 在监听谁的渐变？  ul > li   以前有一个监听动画结束的事件 webkitAnimationEnd  webkitTransitionEnd
	for (var i = 0; i < ulBox.children.length; i++) {
		ulBox.children[i].addEventListener('webkitTransitionEnd', function () {
			flag = true
		})
	}
	for (var i = 0; i < ulBox1.children.length; i++) {
		ulBox1.children[i].addEventListener('webkitTransitionEnd', function () {
			flag1 = true
		})
	}
	//=================================================================

	// 2.0 注册 ol 里面的 li  点击事件
	olLis1.forEach(function (el, index) {
		el.addEventListener('click', function () {
			fn(index)
			// 统一索引
			count1 = index
		})
	})

	// 浅封装一下排他
	function fn1(n) {
		// 排他
		olLis1.forEach(function (item, i) {
			item.removeAttribute('class')
			// 以此次遍历同步操作ulBox
			ulBox1.children[i].style.opacity = 0
		})

		olLis1[n].className = 'cur1'
		ulBox1.children[n].style.opacity = 1
	}

	// 3.0 鼠标经过大盒子，显示左右按钮
	containerBox1.addEventListener('mouseenter', function () {
		clearInterval(timer1)
		timer1 = setInterval(function () {
			// rightBox1.click()
			if (flag1) {
				flag1 = false
				count1++
				if (count1 > olLis1.length - 1) count1 = 0
				fn1(count1)
			}
			zi1.style.display = 'block'
		}, 2000)
		// arrow.style.display = 'none'
	})
	containerBox1.addEventListener('mouseleave', function () {
		// arrow.style.display = 'block'
		zi1.style.display = 'none'
		fn1(0)
		// count = 0
		clearInterval(timer1)
	})

	// 4.0 左右按钮点击事件

	// rightBox1.addEventListener('click', function () {
	// 	if (flag1) {
	// 		flag1 = false
	// 		count1++
	// 		if (count1 > olLis1.length - 1) count1 = 0
	// 		fn1(count1)
	// 	}
	// })

	// leftBox1.addEventListener('click', function () {
	// 	if (flag1) {
	// 		flag1 = false
	// 		count1--
	// 		if (count1 < 0) count = olLis1.length - 1
	// 		fn1(count1)
	// 	}
	// })

	// 在监听谁的渐变？  ul > li   以前有一个监听动画结束的事件 webkitAnimationEnd  webkitTransitionEnd

	// 5.0 自动轮播
	var timer = setInterval(function () {
		// 其实就是右边按钮的点击
		// rightBox.click()
	}, 2000)
	var timer1 = setInterval(function () {
		// 其实就是右边按钮的点击
		// rightBox.click()
	}, 2000)
})

    },
    methods:{

    }
    
}
</script>
  <style scoped>
img {
    width: 100%;
    display: block;
}


.container {
    position: relative;
    width: 50%;
    /* height: 146px; */
    margin-right: 10px;
    /* margin: 100px auto; */
}


.arrow {
    position: absolute;
    top: 550px;
    left: 650px;
    /* bottom: 0; */
    /* transform: translateY(-50%); */
    /* width: 100%; */
    z-index: 999;
    display: block;
}

.arr-left, .arr-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 30px;
    font-family: simsun;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    color: #ccc;
    border: 1px solid rgba(0, 0, 0, 0.5);
    /* background-color: rgba(0, 0, 0, 0.5); */
    cursor: pointer;
}

.arr-left {
    left: 70px;
}
.arr-right {
   right: -160px !important;
}

.zi{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 200px;
    left: 50%;
    font-size: 50px;
    color: rebeccapurple;
    transform: translate(-50%,-50%);
    z-index: 9;
    display: none;
    /* width: 200px;
    height: 100px; */
    /* background-color: rgba(0, 0, 0, 0.5); */
}

.arr-right {
    right: 10px;
}

ul {
    position: relative;
}

ul li {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .8s ease-in-out;
}

/* 默认让第一张显示 */
ul li:first-of-type {
    z-index: 1;
    opacity: 1;
}

ol {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 88;
}

ol li {
    float: left;
    margin: 0 5px;
    font-size: 12px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.5);
}

ol li.cur {
    background-color: #fff;
}

.box{
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    transform: translate(-50%,-50%);
}
img {
    width: 100%;
    display: block;
}


.container1 {
    position: relative;
    width: 50%;
    /* height: 146px; */
    /* margin: 100px auto; */
}


.arrow1 {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 100%;
    z-index: 999;
    display: none;
}

.arr-left1, .arr-right1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 30px;
    font-family: simsun;
    width: 40px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

.arr-left1 {
    left: 10px;
}


.zi1{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 200px;
    left: 50%;
    font-size: 50px;
    color: rebeccapurple;
    transform: translate(-50%,-50%);
    z-index: 9;
    display: none;
    /* width: 200px;
    height: 100px; */
    /* background-color: rgba(0, 0, 0, 0.5); */
}

.arr-right1 {
    right: 10px;
}

.ul {
    position: relative;
}

.ul >p {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .8s ease-in-out;
}

/* 默认让第一张显示 */
.ul >p:first-of-type {
    z-index: 1;
    opacity: 1;
}

.ol {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 88;
}

.ol >p {
    float: left;
    margin: 0 5px;
    font-size: 12px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.5);
}

.ol >p .cur1 {
    background-color: #fff;
}
 

</style>